<style scoped>
    .report{
      display: flex;
      flex-direction: column;
      margin-top: 0.88rem;
      position: relative;
     }
    /*.weui_toast {*/
      /*position: fixed;*/
      /*z-index: 50000;*/
      /*!* width: 7.6em; *!*/
      /*!* min-height: 7.6em; *!*/
      /*top: 180px;*/
      /*left: 50%;*/
      /*margin-left: -3.8em;*/
      /*background: rgba(40,40,40,.75);*/
      /*text-align: center;*/
      /*border-radius: 5px;*/
      /*color: #fff;*/
    /*}*/
    .tab-box{
      display: flex;
      flex-direction: row;
      font-size: 15px;
      height: 0.88rem;
      line-height: 0.88rem;
      color: #585858;
      border-bottom:1px solid #EEEEEE ;
      background: white;
    }
    .tab-box div{
      flex: 1;
      text-align: center;
      position: relative;
    }
    .xz{
      color: #363636;
      font-weight: bold;
    }
    .active{
      width: 0.5rem;
      height: 0.08rem;
      /*background-image: linear-gradient(90deg, #30ABFD 0%, #2095FA 100%);*/

      /*border-bottom: 1px solid #30ABFD;*/
      position: absolute;
      bottom: 0;
      left: 50%;
      display: block;
      margin-left: -0.25rem;
      background: #30ABFD;
      border-radius: 5px;
    }
  .qes-an{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .qes-frist{
    font-size: 17px;
  }
  .qes-an img{
    width: 5%;
    margin-left: 0.12rem;
    margin-right: 0.12rem;
  }
  .qes-an-text{
    color: #666666;
    font-size: 15px;
  }
    .weui_toast {
      position: fixed;
      z-index: 50000;
      /* width: 7.6em; */
      /* min-height: 7.6em; */
      top: 180px;
      left: 50%;
      margin-left: -3.8em;
      background: rgba(40,40,40,.75);
      text-align: center;
      border-radius: 5px;
      color: #fff;
      margin: 0 auto;
      margin-left: -10%;
    }
</style>
<template>
    <div class="report">
        <navx></navx>
      <div id="loadingToast" class="weui_loading_toast" v-if="loading" >
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast" style="width: 1.4rem;height: 1.6rem;min-height: 1.6rem;">
          <div class="weui_loading">
            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
          </div>
          <p class="weui_toast_content">数据加载中</p>
        </div>
      </div>
        <div class="tab-box">
          <div v-for="(item,index) in tab" @click="tabx(index)">
            <div :class="item.idx==idx?'xz':''">{{item.title}}</div>
            <span class="active" v-if="item.idx==idx"></span>
          </div>
        </div>
        <!--周报-->
        <div v-if="idx==1">
          <div class="question-list" v-for="(itemn,index) in zhoubao" @click="zhou(index)" >
            <div class="qes-left">
              <div class="qes-an">
                <span class="qes-frist">{{itemn.frist}}</span>
                <img src="../assets/img/time.png">
                <span class="qes-an-text">{{itemn.title}}</span>
              </div>
            </div>
            <div class="right-icon" style="margin-top: 0.05rem">
              <img src="../assets/img/right.png"  >
            </div>
          </div>
        </div>
      <!--月报-->
      <div v-else>
        <div class="question-list" v-for="(itemx,index) in yuebao" @click="yue(index)">
          <div class="qes-left">
            <div class="qes-an">
              <span class="qes-frist">{{itemx.frist}}</span>
              <img src="../assets/img/time.png">
              <span class="qes-an-text">{{itemx.title}}</span>
            </div>
          </div>
          <div class="right-icon" style="margin-top: 0.05rem">
            <img src="../assets/img/right.png"  >
          </div>
        </div>
      </div>




    </div>
</template>

<script>
    import '../assets/css/list.css'
    import navx from '@/components/navx'
    import axios from 'axios'
    import Qs from 'qs'
    export default {
        name: '',
        data() {
            return {
              loading:true,
              idx:1,
              tab:[{title:'做题周报',idx:'1'},{title:'做题月报',idx:'2'}],
              zhoubao:[{frist:'第一周',title:'2018.12.08-2018.12.14'},{frist:'第二周',title:'2019医师考点'}],
              yuebao:[{frist:'第一月',title:'2018药师考点精讲'},{frist:'第二月',title:'2019医师考点'},{frist:'第三月',title:'2019药师考点精讲班-药学知识'}]
            }
        },components:{
      navx
    }
    ,created() {

        }, mounted() {
          this.ajax();
        }, methods: {
        ajax(){
          var that =this;
          console.log('12312')
          var data={
            uid:1,
            start_time:'2018-12-8',
            end_time:'2018-12-14'
          }
          var pa3=Qs.stringify(data);
          var pa3=Qs.stringify(data);
          axios.post('http://test.jiaoxue.com/question/index/repot',pa3)
            .then(response => {
              // response=JSON.parse(response)
              // console.log(response.data.code)
              if(response.status==200){
                that.loading=false
                that.asklist=response.data.data;
              }else {
                that.loading=false
                alert('网络有错，或者参数不合法')
              }
              // console.log(response)
            })
            .catch(function (error) {
              // alert('网络错误')
            });
        },
        tabx:function (index) {
          this.idx=index+1;
        },
        zhou:function (index) {
          console.log(index)
        },
        yue:function (index) {
          console.log(index)
        }
      }
    }
</script>
